<!-- 首页模块 -->
<!-- sections/HomeSection.vue -->
<template>
  <section class="container mx-auto px-4 py-8">
    <!-- 欢迎标语 -->
    <div class="text-center mb-12">
      <h1 class="text-4xl font-bold text-blue-800 mb-4">发现宝鸡之美</h1>
      <p class="text-xl text-gray-600 max-w-3xl mx-auto">
        探索周秦文化发源地，领略秦岭山脉的壮丽风光
      </p>
    </div>

    <!-- 特色功能卡片 -->
    <h2 class="text-2xl font-bold text-gray-800 mb-6">特色功能</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div v-for="feature in features" :key="feature.id"
        class="feature-card bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-all cursor-pointer"
        @click="navigateTo(feature.route)">
        <div class="flex items-center mb-4">
          <div class="w-10 h-10 flex items-center justify-center text-blue-600">
            <component :is="feature.icon" class="w-6 h-6" />
          </div>
          <h3 class="text-xl font-semibold text-gray-800 ml-3">{{ feature.title }}</h3>
        </div>
        <p class="text-gray-600">{{ feature.description }}</p>
      </div>
    </div>

    <!-- 精选景点 -->
    <div class="bg-white rounded-xl shadow-md p-6 mb-8">
      <h2 class="text-2xl font-bold text-blue-800 mb-4">精选推荐</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <AttractionCard v-for="attraction in featuredAttractions" :key="attraction.id" :attraction="attraction"
          @click="openAttractionDetail(attraction)" />
      </div>
    </div>

    <!-- 景点详情弹窗 -->
    <AttractionDetailDialog v-model="showDetailDialog" :attraction="currentAttraction || defaultAttraction" />

    <!-- 天气信息 -->
    <WeatherWidget class="bg-blue-50 rounded-xl p-6" />
  </section>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
//等ui部分写完再取消注释
import AttractionCard from '../ui/AttractionCard.vue'
import WeatherWidget from '../ui/WeatherWidget.vue'
import FeatureCard from '../ui/FeatureCard.vue'
import MapIcon from '@/assets/icons/map.svg'
import AttractionIcon from '@/assets/icons/attraction.svg'
import PlanIcon from '@/assets/icons/plan.svg'
import AttractionDetailDialog from '../ui/AttractionDetailDialog.vue'
import { MAP_CONFIG } from '@/config/map' // 导入地图配置

//景点图片引用
import FamenImage from '../../assets/images/attractions/famen-temple.jpg'
import Famen_1 from '../../assets/images/dialog/famen-1.jpg'
import Famen_2 from '../../assets/images/dialog/famen_2.jpg'
import Famen_3 from '../../assets/images/dialog/famen_3.jpg'
import TaibaiImage from '../../assets/images/attractions/taibai-mountain.jpg'
import BronzeImage from '../../assets/images/attractions/bronze-museum.jpg'
import JingtaiguanImage from '../../assets/images/attractions/jintaiguan.jpg'
import GuanshanImage from '../../assets/images/attractions/guanshancaoyuan.jpg'
import ZhougongImage from '../../assets/images/attractions/zhougongmiao.jpg'
import DiaoyutaiImage from '../../assets/images/attractions/diaoyutai.jpg';

const router = useRouter()

// 定义景点类型
interface Attraction {
  id: number
  name: string
  category: string
  rating: number
  reviews?: number
  image: string
  description: string
  location?: {
    longitude: number
    latitude: number
  }
  address?: string
  hours?: string
  tickets?: string
  images?: string[]
  contact?: {
    phone: string
    email: string
    website: string
  }
  tips?: string[]
}

// 弹窗控制状态
const showDetailDialog = ref(false)
const currentAttraction = ref<Attraction | null>(null)

// 默认景点对象，防止传递 null
const defaultAttraction: Attraction = {
  id: 0,
  name: '',
  category: '',
  rating: 0,
  image: '',
  description: '',
}

// 打开景点详情弹窗
const openAttractionDetail = (attraction: Attraction) => {
  currentAttraction.value = attraction
  showDetailDialog.value = true
}

// 景点数据
const featuredAttractions = ref<Attraction[]>([
  {
    id: 1,
    name: '法门寺',
    category: '文化古迹',
    rating: 4.7,
    reviews: 128,
    image: FamenImage,
    description: '珍藏佛骨舍利的唐代皇家寺院',
    location: {
      longitude: 107.385,
      latitude: 34.378
    },
    address: '陕西省宝鸡市扶风县法门镇',
    hours: '08:00 - 18:00（全年开放）',
    tickets: '成人票：80元，学生票：40元',
    images: [
      FamenImage,
      Famen_1,
      Famen_2,
      Famen_3
    ],
    contact: {
      phone: '0913-525 8888',
      email: 'info@famensi.com',
      website: 'www.famensi.com'
    },
    tips: [
      '建议游览时间：2-3小时',
      '景区提供免费讲解服务',
      '佛塔地宫每日限流参观'
    ]
  },
  {
    id: 2,
    name: '太白山国家森林公园',
    category: '自然景观',
    rating: 4.9,
    reviews: 256,
    image: TaibaiImage,
    description: '秦岭主峰，六月积雪的奇观胜景',
    location: {
      longitude: 107.421,
      latitude: 34.015
    },
    address: '陕西省宝鸡市眉县汤峪镇',
    hours: '08:00 - 17:00（4月-10月）',
    tickets: '成人票：100元，学生票：50元',
    images: [
      TaibaiImage,
      '/images/attractions/taibai-1.jpg',
      '/images/attractions/taibai-2.jpg',
      '/images/attractions/taibai-3.jpg'
    ],
    contact: {
      phone: '0917-571 1083',
      email: 'info@taibaishan.com',
      website: 'www.taibaishan.com'
    },
    tips: [
      '建议游览时间：1-2天',
      '山顶气温较低，需带保暖衣物',
      '景区内有索道和观光车'
    ]
  },
  {
    id: 3,
    name: '宝鸡青铜器博物院',
    category: '博物馆',
    rating: 4.5,
    reviews: 89,
    image: BronzeImage,
    description: '全国最大的青铜器专题博物馆',
    location: {
      longitude: 107.158,
      latitude: 34.362
    },
    address: '陕西省宝鸡市渭滨区中华石鼓园',
    hours: '09:00 - 17:00（周一闭馆）',
    tickets: '免费开放，需预约',
    images: [
      BronzeImage,
      '/images/attractions/bronze-1.jpg',
      '/images/attractions/bronze-2.jpg',
      '/images/attractions/bronze-3.jpg'
    ],
    contact: {
      phone: '0917-331 5200',
      email: 'info@bronzemuseum.com',
      website: 'www.bronzemuseum.com'
    },
    tips: [
      '建议游览时间：2-3小时',
      '提供免费讲解服务',
      '馆内禁止拍照'
    ]
  },
  {
    "id": 4,
    "name": "金台观",
    "category": "道教圣地",
    "rating": 4.4,
    "reviews": 92,
    "image": JingtaiguanImage,
    "description": "元代道教全真派三大祖庭之一",
    "location": {
      "longitude": 107.142,
      "latitude": 34.379
    }
  },
  {
    "id": 5,
    "name": "关山草原",
    "category": "自然景观",
    "rating": 4.6,
    "reviews": 167,
    "image": GuanshanImage,
    "description": "中国西北内陆唯一的高山草甸景观",
    "location": {
      "longitude": 107.324,
      "latitude": 34.815
    }
    },
  {
    "id": 6,
    "name": "岐山周公庙",
    "category": "历史遗迹",
    "rating": 4.3,
    "reviews": 68,
    "image": ZhougongImage,
    "description": "纪念周公旦的明代古建筑群",
    "location": {
      "longitude": 107.497,
      "latitude": 34.435
    }
  },
  {
    "id": 7,
    "name": "金台观",
    "category": "道教圣地",
    "rating": 4.4,
    "reviews": 92,
    "image": BronzeImage,
    "description": "元代道教全真派三大祖庭之一",
    "location": {
      "longitude": 107.142,
      "latitude": 34.379
    }
  },
  {
    "id": 8,
    "name": "陈仓老街",
    "category": "美食街区",
    "rating": 4.7,
    "reviews": 215,
    "image": BronzeImage,
    "description": "汇集陕西特色小吃的明清风格步行街",
    "location": {
      "longitude": 107.382,
      "latitude": 34.361
    }
  },
  {
    "id": 9,
    "name": "九龙山温泉",
    "category": "休闲娱乐",
    "rating": 4.6,
    "reviews": 178,
    "image": BronzeImage,
    "description": "秦岭山麓的天然硫磺温泉度假区",
    "location": {
      "longitude": 107.274,
      "latitude": 34.187
    }
  },
  {
    "id": 10,
    "name": "凤翔泥塑村",
    "category": "民俗文化",
    "rating": 4.5,
    "reviews": 124,
    "image": BronzeImage,
    "description": "国家级非物质文化遗产传承基地",
    "location": {
      "longitude": 107.415,
      "latitude": 34.522
    }
  },
  {
    "id": 11,
    "name": "红河谷漂流",
    "category": "户外运动",
    "rating": 4.8,
    "reviews": 305,
    "image": BronzeImage,
    "description": "秦岭峡谷激情漂流体验地",
    "location": {
      "longitude": 107.587,
      "latitude": 34.103
    }
  },
  {
    "id": 12,
    "name": "宝鸡植物园",
    "category": "城市公园",
    "rating": 4.2,
    "reviews": 53,
    "image": BronzeImage,
    "description": "收集3000余种植物的生态园区",
    "location": {
      "longitude": 107.162,
      "latitude": 34.341
    }
  },
  {
    "id": 13,
    "name": "天台山景区",
    "category": "自然景观",
    "rating": 4.7,
    "reviews": 198,
    "image": BronzeImage,
    "description": "炎帝故里，道教名山",
    "location": {
      "longitude": 107.652,
      "latitude": 34.236
    }
  },
  {
    "id": 14,
    "name": "西府老街",
    "category": "文化街区",
    "rating": 4.6,
    "reviews": 157,
    "image": BronzeImage,
    "description": "重现明清西府民居建筑风貌",
    "location": {
      "longitude": 107.408,
      "latitude": 34.346
    }
  },
  {
    "id": 15,
    "name": "渭河生态长廊",
    "category": "城市景观",
    "rating": 4.4,
    "reviews": 86,
    "image": BronzeImage,
    "description": "沿渭河建设的滨水休闲绿道",
    "location": {
      "longitude": 107.379,
      "latitude": 34.332
    }
  }

  
]
)

const features = [
  {
    id: 1,
    title: '互动地图',
    description: '探索宝鸡市各个景点的位置和详细信息',
    icon: MapIcon,
    route: '/map'
  },
  {
    id: 2,
    title: '景点列表',
    description: '浏览宝鸡市所有景点的详细介绍和游玩攻略',
    icon: AttractionIcon,
    route: '/attractions'
  },
  {
    id: 3,
    title: '路线规划',
    description: '规划最优旅游路线，合理安排行程时间',
    icon: PlanIcon,
    route: '/planner'
  }
]

const navigateTo = (route: string) => {
  router.push(route)
}
</script>

<style scoped>
.feature-card {
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-2px);
}

:deep(svg) {
  stroke: currentColor;
}
</style>